<template>
  <el-dialog
    v-model="localVisible"
    title=""
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    align-center
  >
    <div class="success-dialog-content">
      <!-- 成功图标和动画 -->
      <div class="success-animation">
        <div class="success-icon">
          <el-icon><CircleCheck /></el-icon>
        </div>
        <div class="success-particles">
          <div class="particle" v-for="i in 6" :key="i"></div>
        </div>
      </div>

      <!-- 标题 -->
      <h2 class="success-title">สร้างคำสั่งซื้อสำเร็จ！</h2>
      <p class="success-subtitle">📱 กรุณาทำการชำระเงินให้เสร็จสิ้น</p>

      <!-- 充值信息 -->
      <div class="recharge-info">
        <div class="amount-display">
          <span class="amount-label">💰 จำนวนเงินที่เติม</span>
          <span class="amount-value">{{ rechargeData?.amount || 0 }} THB</span>
        </div>
        <div class="coin-display">
          <span class="coin-label">🪙 จำนวนเหรียญทองที่ซื้อ</span>
          <span class="coin-value">{{ Math.floor((rechargeData?.amount || 0) / 5.5) }}M</span>
        </div>
      </div>

      <!-- 支付状态显示栏 -->
      <div class="payment-status-display">
        <div class="status-display">
          <span class="status-label">📋 สถานะการชำระเงิน</span>
          <span class="status-value" :class="getStatusClass()">
            {{ getStatusText() }}
          </span>
        </div>
      </div>

      <!-- 支付信息 -->
      <div v-if="paymentInfo" class="payment-info">
        <!-- 支付链接按钮 -->
        <div class="payment-actions">
          <el-button
            v-if="paymentInfo.payUrl || paymentInfo.qrCodeUrl"
            type="primary"
            size="large"
            @click="openPaymentUrl"
            style="width: 100%;"
          >
            <el-icon><Link /></el-icon>
            ไปยังหน้าชำระเงิน
          </el-button>
        </div>
      </div>

      <!-- 支付二维码显示 -->
      <div v-if="paymentInfo?.qrCodeUrl" class="qr-code-section">
        <el-divider>หรือสแกน QR Code เพื่อชำระเงิน</el-divider>
        <div class="qr-code-container">
          <img :src="paymentInfo.qrCodeUrl" alt="QR Code ชำระเงิน" class="qr-code" />
          <p class="qr-code-tip">ใช้มือถือสแกน QR Code ด้านบนเพื่อทำการชำระเงิน</p>
        </div>
      </div>

      <!-- 后端监控提示信息 -->
      <div class="backend-monitoring-section">
        <div class="monitoring-info">
          <div class="monitoring-row">
            <el-icon class="monitoring-icon">
              <span>🤖</span>
            </el-icon>
            <span class="monitoring-text">
              ระบบกำลังตรวจสอบสถานะการชำระเงินโดยอัตโนมัติ
            </span>
          </div>
          <div class="monitoring-details">
            <p>• เมื่อชำระเงินสำเร็จ เหรียญทองจะเข้าบัญชีทันที</p>
            <p>• ระบบจะแจ้งเตือนผ่าน Telegram โดยอัตโนมัติ</p>
            <p>• คุณสามารถปิดหน้านี้และกลับมาตรวจสอบทีหลังได้</p>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button
          type="default"
          size="large"
          @click="handleClose"
          style="width: 100%;"
        >
          <el-icon><Close /></el-icon>
          ปิด
        </el-button>
      </div>

      <!-- 提示信息 -->
      <div class="tips-section">
        <p class="tips-text">
          หลังจากชำระเงินสำเร็จ เหรียญทองจะเข้าบัญชีโดยอัตโนมัติ
        </p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useToast } from 'vue-toastification'
import {
  CircleCheck,
  Link,
  Close
} from '@element-plus/icons-vue'

// Props
interface RechargeData {
  orderId: string
  amount: number
  userId: string
  paymentChannel: string
  paymentResponse?: {
    payUrl?: string
    qrCodeUrl?: string
    [key: string]: any
  }
}

const props = defineProps<{
  modelValue: boolean
  rechargeData?: RechargeData
}>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'close': []
}>()

// 工具
const toast = useToast()

// 响应式数据 - 简化，移除轮询相关变量

// 计算属性
const localVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

const paymentInfo = computed(() => {
  return props.rechargeData?.paymentResponse
})

const paymentAlertTitle = computed(() => {
  if (paymentInfo.value?.payUrl) {
    return 'ลิงก์ชำระเงินถูกสร้างแล้ว'
  } else if (paymentInfo.value?.qrCodeUrl) {
    return 'QR Code ชำระเงินถูกสร้างแล้ว'
  }
  return 'ข้อมูลการชำระเงิน'
})

const paymentAlertDescription = computed(() => {
  if (paymentInfo.value?.payUrl) {
    return 'คลิกปุ่มด้านล่างเพื่อไปยังหน้าชำระเงิน หรือคัดลอกลิงก์ไปเปิดในเบราว์เซอร์'
  } else if (paymentInfo.value?.qrCodeUrl) {
    return 'กรุณาใช้มือถือสแกน QR Code เพื่อทำการชำระเงิน'
  }
  return 'กรุณาทำตามคำแนะนำเพื่อทำการชำระเงิน'
})

// 渠道标签映射
function getChannelLabel(channel?: string): string {
  const labels: Record<string, string> = {
    'TOPPAY': 'TopPay',
    'PAY668': '668Pay',
    'LSPPAY': 'LSPPAY',
    'HUIFENG': '汇沣支付'
  }
  return labels[channel || ''] || channel || 'Unknown'
}

// 简化的状态显示函数（现在不再需要复杂的状态管理）
function getStatusText(): string {
  return 'ระบบตรวจสอบอัตโนมัติ'
}

function getStatusClass(): string {
  return 'status-monitoring'
}


// 打开支付链接
function openPaymentUrl() {
  const payUrl = paymentInfo.value?.payUrl || paymentInfo.value?.qrCodeUrl
  if (payUrl) {
    window.open(payUrl, '_blank')
  }
}

// 注意：支付状态检查现在由后端服务自动处理
// 前端不再需要轮询检查支付状态

// 关闭对话框
function handleClose() {
  emit('close')
}
</script>

<style scoped>
.success-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.success-animation {
  position: relative;
  margin-bottom: 30px;
}

.success-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
  animation: bounce 0.8s ease-in-out;
}

.success-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #67c23a;
  border-radius: 50%;
  animation: particle-burst 1.2s ease-out forwards;
}

.particle:nth-child(1) { animation-delay: 0.1s; transform: rotate(0deg) translateX(50px); }
.particle:nth-child(2) { animation-delay: 0.2s; transform: rotate(60deg) translateX(50px); }
.particle:nth-child(3) { animation-delay: 0.3s; transform: rotate(120deg) translateX(50px); }
.particle:nth-child(4) { animation-delay: 0.4s; transform: rotate(180deg) translateX(50px); }
.particle:nth-child(5) { animation-delay: 0.5s; transform: rotate(240deg) translateX(50px); }
.particle:nth-child(6) { animation-delay: 0.6s; transform: rotate(300deg) translateX(50px); }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

.success-title {
  font-size: 24px;
  color: #67c23a;
  margin-bottom: 8px;
  font-weight: 600;
}

.success-subtitle {
  color: #909399;
  margin-bottom: 30px;
  font-size: 14px;
}

.recharge-info {
  margin-bottom: 20px;
  text-align: center;
}

.amount-display {
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
}

.amount-label {
  display: block;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.amount-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #f56c6c;
}

.coin-display {
  padding: 12px 16px;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
  margin-top: 12px;
}

.coin-label {
  display: block;
  font-size: 14px;
  color: #16a34a;
  margin-bottom: 6px;
  font-weight: 500;
}

.coin-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #15803d;
}

.payment-status-display {
  margin-bottom: 20px;
  text-align: center;
}

.status-display {
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.status-value {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.status-pending {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fcd34d;
}

.status-processing {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #93c5fd;
  animation: pulse 2s infinite;
}

.status-success {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

.status-failed {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.status-cancelled {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.payment-info {
  margin-bottom: 20px;
}

.payment-actions {
  margin-top: 15px;
}

.qr-code-section {
  margin: 20px 0;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.qr-code {
  max-width: 200px;
  max-height: 200px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 10px;
}

.qr-code-tip {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

.backend-monitoring-section {
  margin-bottom: 20px;
  text-align: center;
}

.monitoring-info {
  padding: 16px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #bae6fd;
}

.monitoring-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.monitoring-icon {
  font-size: 16px;
  color: #3b82f6;
}

.monitoring-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.monitoring-details {
  text-align: left;
  font-size: 12px;
  color: #6b7280;
}

.monitoring-details p {
  margin: 4px 0;
  padding-left: 8px;
}

.status-monitoring {
  background: #f0f9ff;
  color: #3b82f6;
  border: 1px solid #bae6fd;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tips-section {
  border-top: 1px solid #e4e7ed;
  padding-top: 15px;
}

.tips-text {
  color: #6b7280;
  font-size: 12px;
  margin: 0;
  text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .amount-value {
    font-size: 20px;
  }
  
  .status-row {
    flex-direction: column;
    gap: 4px;
  }
  
  .status-display {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .status-label {
    font-size: 13px;
  }
  
  .status-value {
    font-size: 13px;
    padding: 3px 10px;
  }
  
  .success-icon {
    font-size: 60px;
  }
  
  .success-title {
    font-size: 20px;
  }
}
</style>
